<template>
  <div class="pagination-box">
    <div class="pages-box">
      <span class="record-num" v-if="showTotal">
        共 {{ total }} 记录
      </span>
      <div class="jump-box">
        <el-button
          link
          class="jump-arrow"
          @click="pageJump('prev')"
          :disabled="prevDisabled"
          :class="{ ban: clickDisabled }"
        >
          <i class="ri-arrow-left-s-line"></i>
        </el-button>
        <div class="jump-page">
          <el-input
            v-model="innerpageNo"
            class="custom-page"
            type="number"
            @change="handleChange"
          ></el-input>
          <span class="split">/</span>
          <span class="pages">{{ pages }}</span>
        </div>
        <el-button
          link
          class="jump-arrow"
          @click="pageJump('next')"
          :disabled="nextDisabled"
          :class="{ ban: clickDisabled }"
        >
          <i class="ri-arrow-right-s-line"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
</script>
<script setup lang="ts" name="GcPagination">
import { ref, nextTick, computed } from 'vue'
const emit = defineEmits(['current-change'])

const props = defineProps({
  pageNo: {
    type: [Number, String],
    default: 1
  },
  pages: {
    type: [Number, String],
    default: 0
  },
  total: {
    type: [Number, String],
    default: 0
  },
  pageSize: {
    type: [Number, String],
    default: 20
  },
  showTotal: {
    type: Boolean,
    default: true
  }
})

const innerpageNo = ref(Number(props.pageNo))

const nextDisabled = computed(() => {
  return innerpageNo.value >= Number(props.pages)
})

const prevDisabled = computed(() => {
  return innerpageNo.value <= 1
})

const handleChange = () => {
  if (!innerpageNo.value || innerpageNo.value <= 1) {
    innerpageNo.value = 1
  } else if (innerpageNo.value >= Number(props.pages)) {
    innerpageNo.value = Number(props.pages)
  }
  nextTick(() => {
    emit('current-change', innerpageNo.value)
  })
}

const clickDisabled = ref(false) // 防误点

const pageJump = (type: string) => {
  clickDisabled.value = true
  if (type === 'next') {
    innerpageNo.value++
  } else {
    innerpageNo.value--
  }
  nextTick(() => {
    emit('current-change', innerpageNo.value)
    setTimeout(() => {
      clickDisabled.value = false
    }, 100)
  })
}
</script>

<style lang="scss" scoped>
.pagination-box {
  padding: 0 12px;
  height: 48px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #3f435e;
  .pages-box,
  .jump-page,
  .jump-box,
  .jump-page {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 12px;
  }
  :deep(.jump-arrow) {
    display: inline-block;
    height: 100%;
    padding: 0;
    color: #acc2fd;
    i {
      font-size: 16px;
      margin-top: 2px;
    }
    .el-icon.is-loading {
      display: none;
    }
    &.ban {
      pointer-events: none;
    }
  }
  .record-num {
    padding-right: 12px;
    font-size: 12px;
  }
  :deep(.el-input) {
    --el-input-border-color: #fff;
  }
  :deep(.custom-page) {
    width: 24px;
    height: 24px;
    border: 1px solid #acc2fd;
    border-radius: 4px;
    box-shadow: none;
    padding: 0;
    margin: 0 14px;
    input::-webkit-outer-spin-button {
      -webkit-appearance: none !important;
    }

    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    input[type="number"] {
      appearance: textfield;
      -moz-appearance: textfield;
      font-size: 12px;
    }
    .el-input__wrapper {
      border: none;
      padding: 0;
      box-shadow: none;
      background-color: inherit;
    }
    .el-input__wrapper:hover,
    .el-input__wrapper.is-focus {
      border: none;
      box-shadow: none;
    }
    .el-input__inner {
      height: 22px;
      line-height: 22px;
      text-align: center;
      font-size: 12px;
    }
  }
  .pages {
    margin: 0 12px;
    font-size: 12px;
  }
  .split {
    color: #babbca;
  }
}
</style>
